<template>
  <div class="dashboard-container">
    <TitleBar title="员工管理/添加员工" />
    <panel class="conten">
      <el-form ref="form" :model="formLi" :rules="suForm" label-width="85px">
        <el-form-item prop="zhanghao" label="员工账户:">
          <el-input v-model.trim="formLi.zhanghao" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item prop="name" label="员工姓名:">
          <el-input v-model.trim="formLi.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item prop="email" label="邮箱地址:">
          <el-input v-model.trim="formLi.email" placeholder="请输入地址" />
        </el-form-item>
        <div class="xiaofu">
          <el-form-item label="所属部门:">
            <el-select v-model="value" placeholder="请选择部门">
              <el-option
                v-for="item in initList"
                :key="item.id"
                :label="item.departmentName"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <p class="describe">选择所属部门后默认继承部门权限，可在员工列表中单独设置权限</p>
        <el-form-item prop="passa" label="登录密码:">
          <el-input type="password" v-model.trim="formLi.passa" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item prop="passb" label="确认密码:">
          <el-input type="password" v-model.trim="formLi.passb" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="备注信息:">
          <el-input style="height:221px;" rows="9" class="textarea" type="textarea" v-model="formLi.textValue" placeholder="请输入内容"></el-input>
        </el-form-item>
        
      </el-form>
    </panel>
    <div class="but">
          <el-button type="primary" @click="getaddStaff">提交</el-button>
        </div>
  </div>
</template>

<script>
import { addStaff, getSection } from "../../../api/jurisdiction.js";
export default {
  data() {
    return {
      value: "",
      initList: [],
      formLi: {
        zhanghao: "",
        name: "",
        email: "",
        region: "",
        passa: "",
        passb: "",
        textValue: ""
      },
      suForm: {
        zhanghao: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (/^[_a-zA-Z0-9_]{2,20}$/.test(value) == false) {
                callback(new Error("用户名由2-20位英文数字组成"));
              } else {
                ("blur");
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (/^[\u4e00-\u9fa5]{2,20}$/.test(value) == false) {
                callback(new Error("用户名由2-20位汉字组成"));
              } else {
                ("blur");
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (
                /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(
                  value
                ) == false
              ) {
                callback(new Error("邮箱数字字母组成"));
              } else {
                ("blur");
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        passa: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (/^[a-zA-Z0-9]{6,20}$/.test(value) == false) {
                callback(new Error("用户名由6-20位数字字母组成"));
              } else {
                ("blur");
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        passb: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (/^[a-zA-Z0-9]{6,20}$/.test(value) == false) {
                callback(new Error("用户名由6-20位数字字母组成"));
              } else if (value !== this.formLi.passa) {
                callback(new Error("两次输入密码不一致!"));
              } else {
                ("blur");
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        textValue: [
          { required: true, message: "请输入备注信息", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (/^[\u4E00-\u9FA5]{2,40}$/.test(value) == false) {
                callback(new Error("备注信息由2-40位组成"));
              } else {
                ("blur");
                callback();
              }
            },
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      getSection({
        pageNum: 1,
        pageSize: 100
      }).then(res => {
        if (res.code == 200) {
          this.initList = res.data.list;
        }
      });
    },
    getaddStaff() {
      if (
        this.formLi.zhanghao != "" &&
        this.formLi.name != "" &&
        this.formLi.email != "" &&
        this.value != "" &&
        this.formLi.passa != "" &&
        this.formLi.passb != "" 
      ) {
        addStaff({
          phone: this.formLi.zhanghao,
          password: this.formLi.passa,
          passwordConfir: this.formLi.passb,
          name: this.formLi.name,
          status: 1,
          departmentCode: this.value,
          email: this.formLi.email,
          remark: this.formLi.textValue
        }).then(res => {
          if (res.code === 200) {
          console.log(this.value, 190);
            this.$router.replace("staffManagement");
            this.$message({
              message: "添加成功！",
              type: "success"
            });
          }
        });
      } else {
        this.$message({
          message: "请填写信息！",
          type: "warning"
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  width: 100%;
  padding: 0 144px 0 22px;
  .conten {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    .el-form{
      height: auto;
    }
    .el-input {
      width: 444px;
      height: 40px;
    }
    .textarea{
        width: 444px;
    }
    .describe{
      margin: none;
      margin-left: 85px;
      height:17px;
      font-size:12px;
      font-family:PingFangSC;
      font-weight:400;
      color:rgba(153,153,153,1);
      line-height:17px;
    }
  }
  .but{
    margin: 65px 0 100px 0;
    text-align: center;
  }
}
</style>
